<template>
  <div class="about">
    <div class="header">
      <Header></Header>
    </div>
    <div class="content">
      <el-tabs :tab-position="tabPosition" @tab-click="onTabClick">
        <el-tab-pane v-for="item in navList" :key="item.id" :label="item.title">
          <div class="title flex">
            <div class="line"></div>
            <div class="tip">{{ item.title }}</div>
          </div>
          <div class="wrap">
            <div class="text" v-html="content"></div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Header from "../components/Header";
import Footer from "../components/Footer.vue";
export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      tabPosition: "left",
      navList: [],
      content: "",
      id: 2,
    };
  },
  mounted() {
    this.getNav();
    this.getAbout(2);
  },
  methods: {
    getNav() {
      this.$axios
        .get("aboutUs")
        .then((res) => {
          this.navList = res.data;
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    getAbout(id) {
      let params = {
        id: id,
      };
      this.$axios
        .get("aboutInfo", { params })
        .then((res) => {
          this.content = res.data.c_content;
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    onTabClick(val) {
      console.log("val", val);
      let id = Number(val.index) + 1;
      this.$nextTick(() => {
        this.getAbout(id);
      });
    },
  },
};
</script>
<style>
.about .el-tabs__nav {
  background: #fff;
  width: 260px;
}
.about .el-tabs__nav .el-tabs__item {
  text-align: center;
}
.about .content .el-tabs__nav .is-active {
  background: #a0a0a0;
  color: #fff;
  height: 42px;
  line-height: 42px;
  cursor: pointer;
}
</style>
<style lang="less" scoped>
.content {
  width: 1200px;
  margin: 20px auto;
  .title {
    text-align: left;
    align-items: center;
    margin-bottom: 5px;

    .line {
      background: #888;
      width: 5px;
      height: 30px;
      margin-right: 10px;
    }
    .tip {
      font-size: 18px;
      font-weight: 600;
    }
  }
  .wrap {
    background: #fff;
    text-align: left;
    padding: 20px;
  }
}
</style>
